<template>
  <div class="orderfrom-wrap">
    <van-nav-bar
      title="我的订单"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      fixed
    />
    <div class="order-header">
      <van-tabs v-model="activeName">
        <van-tab
          :title="item.title"
          :name="item.sta"
          v-for="(item, index) in menuList"
          :key="index"
        ></van-tab>
      </van-tabs>
    </div>
    <div class="order-content">
      <div v-if="!historyOrder.length">
        <div class="img">
          <img src="../assets/image/orderfrom.png" alt />
        </div>
        <div class="text">
          <p>您还没有订单，快去点一杯吧~</p>
        </div>
        <div class="btn" v-if="activeName != 'c'">
          <button @click="toOrder()">去点单</button>
        </div>
      </div>
      <div v-if="historyOrder.length > 0">
        <div class="order-menu">
          <div v-for="(goodsInfo, index) in historyOrder" :key="index">
            <div class="order-menu-header">
              <p>蜜雪冰城</p>
              <p>制作中</p>
            </div>
            <div
              class="order-menu-img"
              v-for="(item, index) in goodsInfo"
              :key="index"
            >
              <img :src="item.pic" alt="" />
              <div class="info">
                <div class="title">{{ item.title }}</div>
                <div class="count">x{{ item.count }}</div>
                <div class="price">￥{{ item.price }}</div>
              </div>
            </div>
            <div class="order-menu-footer">
              <div class="footer-text">
                <div class="num">
                  <p>下单时间：{{ add_time }}</p>
                  <p>订单编号：{{ goods_code }}</p>
                </div>
              </div>
              <p class="totalprice">￥{{ totalprice[index] }}</p>
              <div class="footer-btn">
                <button>申请退款</button>
                <button>联系商家</button>
                <button @click="toclaim">取餐码</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs } from "@vue/reactivity";
import { useRouter } from "vue-router";
import { onBeforeMount } from "@vue/runtime-core";
import axios from "../utils/axios";
import { Toast } from "vant";
export default {
  setup() {
    const router = useRouter();
    const state = reactive({
      menuList: [
        {
          title: "到店",
          sta: "a",
        },
        {
          title: "外卖",
          sta: "b",
        },
        {
          title: "商城",
          sta: "c",
        },
      ],
      isPay: sessionStorage.getItem("isPay") || false,
      add_time: localStorage.getItem("add_time"),
      activeName: "a",
      goodsInfo: eval("(" + window.localStorage.getItem("shopCart") + ")"),
      goods_code: localStorage.getItem("order_code"),
      totalprice: [],
      historyOrder: [],
    });
    const onClickLeft = () => history.back();
    const toOrder = () => {
      router.push("order");
    };
    onBeforeMount(async () => {
      let uid = JSON.parse(localStorage.getItem("userinfo")).uid;
      await axios
        .get("/getshopcart", {
          params: {
            uid: uid,
          },
        })
        .then((res) => {
          if (res.data.code == 1) {
            console.log(res.data.result);
            res.data.result.forEach((item) => {
              state.historyOrder.push(JSON.parse(item.shopcart));
              state.totalprice.push(JSON.parse(item.totalprice));
            });
            state.historyOrder = state.historyOrder.reverse();
            state.totalprice = state.totalprice.reverse();
          } else {
            Toast.fail(res.data.message);
          }
        });
    });
    return {
      ...toRefs(state),
      onClickLeft,
      toOrder,
    };
  },
};
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
.orderfrom-wrap {
  .order-header {
    margin-top: 46px;
  }
  .order-content {
    .img {
      img {
        margin: 20px 24px;
      }
    }
    .text {
      p {
        text-align: center;
        font-size: 17px;
        margin-bottom: 180px;
      }
    }
    .btn {
      button {
        text-align: center;
        width: 80%;
        margin-left: 10%;
        height: 50px;
        background-color: #e50055;
        color: #fff;
        border: 0;
        border-radius: 5px;
      }
    }
    .order-menu {
      margin: 20px 10px 0 10px;
      background-color: #fafafa;
      border-radius: 5px;
      .order-menu-header {
        padding: 10px 0px;
        margin: 0 15px;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #d0d0d0;
        p {
          text-align: center;
          font-size: 17px;
        }
      }
      .order-menu-img {
        display: flex;
        justify-content: space-between;
        padding: 10px 0px;
        margin: 0 15px;
        border-bottom: 1px solid #d0d0d0;
        img {
          width: 50px;
          height: 50px;
        }
        .info {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .title {
            text-align: left;
            font-size: 12px;
          }
          .count {
            margin-left: 50px;
          }
          .price {
            margin-left: 25px;
          }
        }
      }
      .order-menu-footer {
        border-bottom: 10px solid #fff;
        .footer-text {
          padding: 10px 0px;
          margin: 0 15px;
          display: flex;
          justify-content: space-between;
          .num {
            font-size: 12px;
            display: flex;
            flex-direction: column;
          }
        }
        .totalprice {
          margin-right: 10px;
          text-align: right;
        }
        .footer-btn {
          padding: 10px 0px;
          margin: 0 15px;
          text-align: right;
          button {
            margin-left: 10px;
            color: #707071;
            font-size: 12px;
            padding: 6px;
            border: 1px;
          }
        }
      }
    }
  }
}
</style>